import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_swiper_view/flutter_swiper_view.dart';
import 'package:get/get.dart';
import 'package:mtf/app/data/NewsEntity.dart';
import 'package:mtf/app/data/VideoEntity.dart';
import 'package:mtf/app/modules/news_module/news_controller.dart';
import 'package:mtf/app/routes/app_pages.dart';
import 'package:mtf/app/theme/app_colors.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import '../../../R.dart';
import '../../theme/app_text_theme.dart';
import '../../utils/AppUtils.dart';
/**
 * GetX Template Generator - fb.com/htngu.99
 * */

class newsPage extends GetView<newsController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: controller.obx((state) => Stack(
              children: [
                Image.asset(
                  R.assetsImgBgNewsTop,
                  height: 140,
                  width: double.infinity,
                  fit: BoxFit.fill,
                ),
                RefreshConfiguration(
                  headerBuilder: () => MaterialClassicHeader(),
                  footerBuilder: () => ClassicFooter(),
                  child: SmartRefresher(
                    controller: controller.refreshController,
                    enablePullDown: true,
                    enablePullUp: true,
                    onRefresh: () {
                      controller.refreshData();
                    },
                    onLoading: () {
                      controller.loadData();
                    },
                    child: ListView.builder(
                      padding: EdgeInsets.zero,
                      itemCount: 6,
                      itemBuilder: (context, index) {
                        if (index == 0) {
                          return Padding(
                            padding: const EdgeInsets.all(10.0),
                            child: Center(
                              child: Text("MTF", style: titleTextStyle),
                            ),
                          );
                        } else if (index == 1) {
                          return bannerView();
                        } else if (index == 2) {
                          return noticeView();
                        } else if (index == 3) {
                          return videoView();
                        } else if (index == 4) {
                          return listNews();
                        } else {
                          return SizedBox(height: 0);
                        }
                      },
                    ),
                  ),
                )
              ],
            )));
  }

  Widget bannerView() {
    return Container(
      margin: EdgeInsets.all(10),
      width: double.infinity,
      height: 150,
      child: Swiper(
        itemBuilder: (context, index) {
          return InkWell(
            onTap: (){
              controller.clickBannerIntent(index);
            },
            child: ClipRRect(
                borderRadius: BorderRadius.circular(8),
                child: Image.network(
                  controller.bannerList.value[index].url ?? "",
                  fit: BoxFit.fill,
                )),
          );
        },
        itemCount: controller.bannerList.value.length,
        pagination: SwiperPagination(
            builder: DotSwiperPaginationBuilder(
                color: Colors.white,
                activeColor: c_f12f38,
                size: 5,
                activeSize: 7)),
        scale: 0.9,
      ),
    );
  }

  Widget noticeView() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 10),
      padding: EdgeInsets.symmetric(horizontal: 10),
      width: double.infinity,
      height: 40,
      decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(8)),
      child: InkWell(
        onTap: () {
          controller.clickNoticeList();
        },
        child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SvgPicture.asset(R.assetsImgIcSvgVoice),
              Expanded(
                flex: 1,
                child: Swiper(
                  itemBuilder: (context, index) {
                    return Align(
                      alignment: Alignment.centerLeft,
                      child: Padding(
                        padding: const EdgeInsets.only(left: 8.0),
                        child: Text(
                            "${controller.noticeList.value[index].title}",
                            style: TextStyle(color: c_333333)),
                      ),
                    );
                  },
                  itemCount: controller.noticeList.value.length,
                  scrollDirection: Axis.vertical,
                ),
              ),
              SizedBox(
                  height: 16,
                  child: VerticalDivider(
                    width: 1,
                    color: c_d8d8d8,
                    thickness: 1,
                  )),
              SizedBox(width: 12.0),
              Icon(
                Icons.arrow_forward_ios,
                color: c_d8d8d8,
                size: 16,
              )
            ]),
      ),
    );
  }

  Widget videoView() {
    return Container(
        margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
        width: double.infinity,
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage(R.assetsImgBgStyleR20), fit: BoxFit.fill)),
        padding: EdgeInsets.only(top: 15, left: 10, right: 10),
        child: Column(children: [
          Flex(
            direction: Axis.horizontal,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Image.asset(
                R.assetsImgBgLearnLogo,
                width: 127,
                height: 15,
              ),
              InkWell(
                onTap: () {
                  controller.clickVideoList();
                },
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Text(
                      "查看更多",
                      style: TextStyle(fontSize: 12, color: c_999999),
                    ),
                    SvgPicture.asset(
                      R.assetsImgIcSvgRight,
                      width: 16,
                      height: 16,
                    )
                  ],
                ),
              )
            ],
          ),
          GridView.builder(
            shrinkWrap: true,
            itemCount: controller.videoList.length,
            padding: EdgeInsets.only(top: 15),
            physics: NeverScrollableScrollPhysics(),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisSpacing: 10.0, //水平子 Widget 之间间距
              crossAxisCount: 2, //一行的 Widget 数量
            ),
            itemBuilder: (context, index) {
              return itemVideo(controller.videoList[index]);
            },
          )
        ]));
  }

  Widget itemVideo(ListVideoElement item) {
    return Column(children: [
      InkWell(
        onTap: () {
          controller.clickVideoDetail(item);
        },
        child: Stack(
          alignment: Alignment.center,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(10), topRight: Radius.circular(10)),
              child: Image.network(
                item.imghead ?? "https://via.placeholder.com/108x92",
                fit: BoxFit.fill,
                width: double.infinity,
                height: 92,
              ),
            ),
            SvgPicture.asset(R.assetsImgIcSvgPlay)
          ],
        ),
      ),
      Container(
        width: double.infinity,
        alignment: Alignment.center,
        padding: const EdgeInsets.symmetric(vertical: 12),
        decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(10),
                bottomRight: Radius.circular(10))),
        child: Text(item.title ?? "",maxLines: 1,),
      )
    ]);
  }

  Widget listNews() {
    return Container(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: InkWell(
              onTap: () {
                controller.clickCommentList();
              },
              child: Flex(
                direction: Axis.horizontal,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "每日评论",
                    style: TextStyle(
                        fontSize: 20,
                        color: c_333333,
                        fontWeight: FontWeight.bold),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        "查看",
                        style: TextStyle(fontSize: 12, color: c_999999),
                      ),
                      SvgPicture.asset(
                        R.assetsImgIcSvgRight,
                        width: 16,
                        height: 16,
                      )
                    ],
                  )
                ],
              ),
            ),
          ),
          ListView.separated(
            padding: EdgeInsets.only(top: 10),
            itemBuilder: (context, index) {
              return newsItem(controller.newsList[index]);
            },
            itemCount: controller.newsList.length,
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            separatorBuilder: (context, index) {
              return Divider(height: 1);
            },
          )
        ],
      ),
    );
  }

  Widget newsItem(ListNewsElement item) {
    return InkWell(
      onTap: () {
        controller.clickRecordDetail(item);
      },
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
        decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(10)),
        child: Row(children: [
          Expanded(
            flex: 2,
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Text(
                item.title ?? "",
                style: TextStyle(
                    fontSize: 15, fontWeight: FontWeight.bold, color: c_333333),
              ),
              SizedBox(height: 13),
              Row(
                children: [
                  Text(
                    AppUtils.dateToString(item.updatedAt),
                    style: TextStyle(fontSize: 12, color: c_999999),
                  ),
                  SizedBox(width: 10),
                  Icon(
                    Icons.remove_red_eye_outlined,
                    size: 12,
                    color: c_999999,
                  ),
                  Text(item.viewNum.toString(),
                      style: TextStyle(fontSize: 12, color: c_999999)),
                ],
              )
            ]),
          ),
          SizedBox(
            height: 72,
            width: 108,
            child: ClipRRect(
              child: Image.network(
                item.imgHead ?? "https://via.placeholder.com/108x72",
                fit: BoxFit.fill,
              ),
              borderRadius: BorderRadius.circular(10),
            ),
          )
        ]),
      ),
    );
  }
}
